<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>TodoMVC example</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/todomvc-app-css@2.3.0/index.css"
    />
  </head>
  <body>
    <div id="app"></div>
    <!-- <footer class="info">
      <p>Double-click to edit a todo</p>
      <p>Written by <a href="https://github.com/ustbhuangyi">ustbhuangyi</a></p>
      <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
    </footer> -->
    <script id="todo-template" type="text/template">
      <section class="todoapp">
        <!-- <header class="header">
          <h1>todos</h1>
          <input class="new-todo"
                 autofocus autocomplete="off"
                 placeholder="What needs to be done?"
                 v-model="state.newTodo"
                 @keyup="onNewTodoKeyup">
        </header> -->
        <!-- <section class="main" v-if="state.todos.length">
          <input id="toggle-all" class="toggle-all" type="checkbox" v-model="state.allDone">
          <label for="toggle-all">Mark all as complete</label>
          <ul class="todo-list">
            <li v-for="todo in state.filteredTodos"
                class="todo"
                :key="todo.id"
                :class="{ completed: todo.completed, editing: todo == state.editedTodo }">
              <div class="view">
                <input class="toggle" type="checkbox" v-model="todo.completed">
                <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
                <button class="destroy" @click="removeTodo(todo)"></button>
              </div>
              <input class="edit" type="text"
                     v-model="todo.title"
                     @blur="doneEdit(todo)"
                     @keyup="onEditKeyup($event,todo)"
              >
            </li>
          </ul>
        </section> -->
        <div >
          <ul style="background:red" >
            <li v-for="item in 5" style="'padding-left:10px'" :key="item">{{ item }}</li>
          </ul>
        </div>
        <!-- <footer class="footer" v-if="state.todos.length">
            <span class="todo-count">
              <strong>{{ state.remaining }}</strong>
              <span>{{state.remainingText}}</span>
            </span>
          <ul class="filters">
            <li><a href="#/all" :class="{ selected: state.visibility == 'all' }">All</a></li>
            <li><a href="#/active" :class="{ selected: state.visibility == 'active' }">Active</a></li>
            <li><a href="#/completed" :class="{ selected: state.visibility == 'completed' }">Completed</a></li>
          </ul>
          <button class="clear-completed" @click="removeCompleted" v-if="state.todos.length > remaining">
            Clear completed
          </button>
        </footer> -->
      </section>
    </script>
    <script src="/__build__/todomvc.js"></script>
  </body>
</html>
